<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			button{
				width: 80px;
				height: 50px;
				background-color: antiquewhite;
				border: none;
			}
			div{
				width: 350px;
				height: 250px;
				background-color: yellow;
				line-height: 200px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<button class="v1">tab01</button>
		<button class="v2">tab02</button>
		<button class="v3">tab03</button>
		<div>tab文字内容一</div>
		<script>
			$(".v1").click(function(){
				$(".v1").css("background-color","yellow");
				$("div").text("tab文字内容一");
				$(".v2").css("background-color","antiquewhite")
				$(".v3").css("background-color","antiquewhite")
			});
			$(".v2").click(function(){
				$(".v2").css("background-color","yellow");
				$("div").text("tab文字内容二");
				$(".v1").css("background-color","antiquewhite")
				$(".v3").css("background-color","antiquewhite")
			});
			$(".v3").click(function(){
				$(".v3").css("background-color","yellow");
				$("div").text("tab文字内容三");
				$(".v1").css("background-color","antiquewhite")
				$(".v2").css("background-color","antiquewhite")
			});
		</script>
	</body>
</html>